<!--投稿模块左侧的导航栏-->

<template>
    <div class="tougao-middle-navi">
        <div class="cham-tougao-navi-left">

            <div v-bind:class="{'cham-tougao-is-selected': selectedTougaoNavigater===1 }" class="cham-tougao-navigater" @click="clickNavigater(1)">
                <icon name="cham-user-centre" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                <span style="color:#303133">普通投稿</span>
            </div>

            <div v-bind:class="{'cham-tougao-is-selected': selectedTougaoNavigater===2}" class="cham-tougao-navigater" @click="clickNavigater(2)">
                <icon name="cham-user-centre" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                <span style="color:#303133">新番投稿</span>
            </div>

            <div v-bind:class="{'cham-tougao-is-selected': selectedTougaoNavigater===3}" class="cham-tougao-navigater" @click="clickNavigater(3)">
                <icon name="cham-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                <span style="color:#303133">热点投稿</span>
            </div>

            <div v-bind:class="{'cham-tougao-is-selected': selectedTougaoNavigater===4}" class="cham-tougao-navigater" @click="clickNavigater(4)">
                <icon name="cham-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                <span style="color:#303133">稿件管理</span>
            </div>

            <div v-bind:class="{'cham-tougao-is-selected': selectedTougaoNavigater===5}" class="cham-tougao-navigater" @click="clickNavigater(5)">
                <icon name="cham-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                <span style="color:#303133">新番分组</span>
            </div>

            <div v-bind:class="{'cham-tougao-is-selected': selectedTougaoNavigater===6}" class="cham-tougao-navigater" @click="clickNavigater(6)">
                <icon name="cham-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                <span style="color:#303133">普通分组</span>
            </div>

<!--            <div class="choas-divider&#45;&#45;horizontal" style="margin-top:0px !important;"></div>-->

            <div v-bind:class="{'cham-tougao-is-selected': selectedTougaoNavigater===7}" class="cham-tougao-navigater" @click="clickNavigater(7)">
                <icon name="cham-exit" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                <span style="color:#303133">退出</span>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "tougaoNavigate",
        data(){
            return{
                selectedTougaoNavigater:0
            }
        },
        watch:{
            'selectedTougaoNavigater'(newValue){
                this.$emit('selectedTougaoNavigaterChange',newValue);
                //debugger;
            }
        },
        mounted() {
            this.selectedTougaoNavigater=1;
        },
        methods:{
            clickNavigater(index){
                this.selectedTougaoNavigater = index;
            }
        }
    }
</script>

<style scoped>
    .tougao-middle-navi{
        float:left;
        width:200px;
        min-height:500px;
    }

    .cham-tougao-navi-left{
        width:200px;
        height:800px;
        float:left;
    }

    .cham-tougao-navigater{
        cursor:pointer;
        /*width:calc(100% - 40px);*/
        height:60px;
        /*margin-left:20px;*/
        line-height:60px;
    }

    .cham-tougao-navigater:hover{
        background-color:#E1E4EA;
    }

    .cham-tougao-is-selected{
        /*background-color:#ECF5FF;*/
        background-color:#00a1d7!important;
    }

    .cham-tougao-is-selected > svg,.cham-tougao-is-selected >span{
        color:#ffffff!important;
    }
</style>
